{{#unless
  (or
    (eq attr.type "boolean")
    (contains
      attr.options.editType
      (array
        "boolean"
        "optionalText"
        "searchSelect"
        "mountAccessor"
        "kv"
        "file"
        "ttl"
        "stringArray"
        "json"
        "regex"
      )
    )
  )
}}
{{#unless (eq attr.type "object")}}
    <label for="{{attr.name}}" class="is-label">
    {{labelString}}
    {{#if attr.options.helpText}}
      {{#info-tooltip}}
        <span data-test-help-text>
          {{attr.options.helpText}}
        </span>
      {{/info-tooltip}}
    {{/if}}
  </label>
  {{#if attr.options.subText}}
    <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
  {{/if}}
{{/unless}}
{{/unless}}
{{#if attr.options.possibleValues}}
  <div class="control is-expanded">
    <div class="select is-fullwidth">
      <select name="{{attr.name}}" id="{{attr.name}}" onchange={{action
          (action "setAndBroadcast" valuePath)
          value="target.value"
        }} data-test-input={{attr.name}}>
        {{#if attr.options.noDefault}}
          <option value="">
            Select one
          </option>
        {{/if}}
        {{#each (path-or-array attr.options.possibleValues model) as |val|}}
          <option selected={{eq (get model valuePath) (or val.value val)}} value={{or val.value val}}>
            {{or val.displayName val}}
          </option>
        {{/each}}
      </select>
    </div>
  </div>
{{else if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}}
  <div class="b-checkbox">
    <input type="checkbox" id="{{attr.name}}" class="styled" checked={{eq (get model valuePath) attr.options.trueValue}}
      onchange={{action
        (action
          "setAndBroadcastBool"
          valuePath
          attr.options.trueValue
          attr.options.falseValue
        )
        value="target.checked"
      }} data-test-input={{attr.name}} />

    <label for="{{attr.name}}" class="is-label">
      {{labelString}}
      {{#if attr.options.helpText}}
        {{#info-tooltip}}{{attr.options.helpText}}{{/info-tooltip}}
      {{/if}}
    </label>
  </div>
{{else if (eq attr.options.editType "searchSelect")}}
  <div class="form-section">
    <SearchSelect
      @id={{attr.name}}
      @models={{attr.options.models}}
      @onChange={{action (action "setAndBroadcast" valuePath)}}
      @inputValue={{get model valuePath}}
      @helpText={{attr.options.helpText}}
      @subText={{attr.options.subText}}
      @wildcardLabel={{attr.options.wildcardLabel}}
      @label={{labelString}}
      @subLabel={{attr.options.subLabel}}
      @fallbackComponent={{attr.options.fallbackComponent}}
      @selectLimit={{attr.options.selectLimit}}
      @backend={{model.backend}}
      @disallowNewItems={{attr.options.onlyAllowExisting}}
    />
  </div>
{{else if (eq attr.options.editType "mountAccessor")}}
  {{mount-accessor-select
    name=attr.name
    label=labelString
    warning=attr.options.warning
    helpText=attr.options.helpText
    value=(get model valuePath)
    onChange=(action "setAndBroadcast" valuePath)
  }}
{{else if (eq attr.options.editType "kv")}}
{{!-- KV Object Editor --}}
  {{kv-object-editor
    value=(get model valuePath)
    onChange=(action "setAndBroadcast" valuePath)
    label=labelString
    warning=attr.options.warning
    helpText=attr.options.helpText
  }}
{{else if (eq attr.options.editType "file")}}
{{!-- File Input --}}
  {{text-file
    helpText=attr.options.helpText
    file=file
    onChange=(action "setFile")
    label=labelString
  }}
{{else if (eq attr.options.editType "ttl")}}
  {{!-- TTL Picker --}}
  <div class="field">
    <TtlPicker2
      @onChange={{action (action "setAndBroadcastTtl" valuePath)}}
      @label={{labelString}}
      @helperTextDisabled={{or attr.subText "Vault will use the default lease duration"}}
      @helperTextEnabled={{or attr.subText "Lease will expire after"}}
      @description={{attr.helpText}}
      @initialValue={{or (get model valuePath) attr.options.setDefault}}
    />
  </div>
{{else if (eq attr.options.editType "regex")}}
  {{!-- Regex Validated Input --}}
  <RegexValidator
    @attr={{attr}}
    @labelString={{labelString}}
    @value={{or (get model valuePath)
        attr.options.defaultValue}}
    @onChange={{action
          (action "setAndBroadcast" valuePath)
          value="target.value"
        }}
  />
{{else if (eq attr.options.editType "optionalText")}}
  {{!-- Togglable Text Input --}}
  <Toggle
    @name="show-{{attr.name}}"
    @status="success"
    @size="small"
    @onChange={{action 'toggleShow' attr.name}}
    @checked={{showInput}}
    data-test-toggle={{attr.name}}
  >
    <span class="ttl-picker-label is-large">{{labelString}}</span><br/>
    <div class="description has-text-grey">
      {{#if showInput}}
        <span>{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</span>
      {{else}}
        <span>{{or attr.options.defaultSubText "Vault will use the engine default."}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</span>
      {{/if}}
    </div>
    {{#if showInput}}
      <input
        data-test-input={{attr.name}}
        id={{attr.name}}
        autocomplete="off"
        spellcheck="false"
        value={{or (get model valuePath)
        attr.options.defaultValue}}
        onChange={{action
          (action "setAndBroadcast" valuePath)
          value="target.value"
        }}
        class="input"
        maxLength={{attr.options.characterLimit}} />
    {{/if}}
  </Toggle>
{{else if (eq attr.options.editType "stringArray")}}
  {{string-list
    data-test-input=attr.name
    label=labelString
    warning=attr.options.warning
    helpText=attr.options.helpText
    inputValue=(get model valuePath)
    onChange=(action (action "setAndBroadcast" valuePath))
  }}
{{else if (eq attr.options.sensitive true)}}
{{!-- Masked Input --}}
  <MaskedInput
    @value={{or (get model valuePath) attr.options.defaultValue}}
    @allowCopy="true"
    @onChange={{action (action "setAndBroadcast" valuePath)}}
  />
{{else if (or (eq attr.type "number") (eq attr.type "string"))}}
  <div class="control">
    {{#if (eq attr.options.editType "textarea")}}
    {{!-- Text area --}}
      <textarea data-test-input={{attr.name}} id={{attr.name}}
        value={{or (get model valuePath) attr.options.defaultValue}} oninput={{action
          (action "setAndBroadcast" valuePath)
          value="target.value"
        }} class="textarea"></textarea>
    {{else if (eq attr.options.editType "password")}}
      <Input
        data-test-input={{attr.name}}
        @type="password"
        @value={{get model valuePath}}
        @name={{attr.name}}
        class="input"
        {{!-- Prevents browsers from auto-filling --}}
        @autocomplete="new-password"
        @spellcheck="false" />
    {{else if (eq attr.options.editType "json")}}
      {{!-- JSON Editor --}}
      <JsonEditor
        data-test-input={{attr.name}}
        @title={{labelString}}
        @value={{if
          (get model valuePath)
          (stringify (jsonify (get model valuePath)))
          attr.options.defaultValue
        }}
        @valueUpdated={{action "codemirrorUpdated" attr.name "string"}}
        @options={{hash
          theme=(or attr.options.theme 'hashi')
        }}
        @helpText={{attr.options.helpText}}
      >
        {{#if attr.options.allowReset}}
          <button
            type="button"
            class="toolbar-link"
            disabled={{not (get model valuePath)}}
            onClick={{action
              (action "setAndBroadcast" valuePath)
              null
            }}
            data-test-json-clear-button
          >
            Clear
            <Icon @glyph="refresh-default" aria-hidden="true" />
          </button>
        {{/if}}
      </JsonEditor>
      {{#if attr.options.subText}}
        <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
      {{/if}}
    {{else}}
      {{!-- Regular Text Input --}}
      <input data-test-input={{attr.name}} id={{attr.name}} autocomplete="off" spellcheck="false"
        value={{or (get model valuePath) attr.options.defaultValue}} onChange={{action
          (action "setAndBroadcast" valuePath)
          value="target.value"
        }} class="input" maxLength={{attr.options.characterLimit}} />

      {{#if attr.options.validationAttr}}
        {{#if
          (and
            (get model valuePath) (not (get model attr.options.validationAttr))
          )
        }}
          <AlertInline @type="danger" @message={{attr.options.invalidMessage}} />

        {{/if}}
      {{/if}}
    {{/if}}
  </div>
{{else if (eq attr.type "boolean")}}
  <div class="b-checkbox">
    <input disabled={{this.disabled}} type="checkbox" id="{{attr.name}}" class="styled" checked={{get model attr.name}} onchange={{action
        (action "setAndBroadcast" valuePath)
        value="target.checked"
      }} data-test-input={{attr.name}} />

    <label for="{{attr.name}}" class="is-label">
      {{labelString}}
      {{#if (and this.showHelpText attr.options.helpText)}}
        {{#info-tooltip}}{{attr.options.helpText}}{{/info-tooltip}}
      {{/if}}
    </label>
  </div>
{{else if (eq attr.type "object")}}
  {{json-editor
    title=labelString
    value=(if (get model valuePath) (stringify (get model valuePath)) emptyData)
    valueUpdated=(action "codemirrorUpdated" attr.name false)
    helpText=attr.options.helpText
  }}
{{/if}}
